{% extends "base.html" %}

{% block head %}
{{ super() }}
{% endblock %}

{% block import_area %}
{{ super() }}
<script src="{{url_for('static', filename='../static/js/control/ztable.js')}}" type="text/javascript" charset="utf-8"></script>
<script src="{{url_for('static', filename='../static/js/control/zform.js')}}" type="text/javascript" charset="utf-8"></script>
<script src="{{url_for('static', filename='../static/js/control/ztree.js')}}" type="text/javascript" charset="utf-8"></script>
<script src="{{url_for('static', filename='../static/treeview/tree.jquery.js')}}" type="text/javascript" charset="utf-8"></script>
<script src="{{url_for('static', filename='../static/js/plugins/bootstrap-paginator.js')}}" type="text/javascript" charset="utf-8"></script>
<script src="{{url_for('static', filename='../static/datepicker/js/bootstrap-datepicker.js')}}" type="text/javascript" charset="utf-8"></script>

<link rel="stylesheet" href="../static/datepicker/css/datepicker.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../static/treeview/jqtree.css" type="text/css" media="screen" />


    <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.0.1/jquery.qtip.min.css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.0.1/jquery.qtip.min.js"></script>

    <script src="{{url_for('static', filename='../static/plugins/timeline/raphael-min.js')}}" type="text/javascript" charset="utf-8" ></script>
    <script src="{{url_for('static', filename='../static/plugins/timeline/chronoline.js')}}" type="text/javascript" charset="utf-8" ></script>

    <link rel="stylesheet" href="../static/plugins/timeline/chronoline.css" type="text/css" media="screen" />



{% endblock %}


{% block js_code %}
{{ super() }}
<script>
	$(document).ready(function(){
		var $SprintTimeline = null;
		
		var $RequirementForm = $('#requirement-form').ZForm();
		var $SprintForm = $('#sprint-form').ZForm();
		var $ProjectForm = $('#project-form').ZForm();
		var $ProjectTree = $('#project-tree').ZTree({
			data: [],
			onUpdate:updateNode
			});
		
		var $RequirementList = $('#requirement-list').ZTable({
			columns:{'name':'Name', 'importance':'Importance', 'source':'From'},
			//datas:{{ specs | safe }},
			with_title:true,
			pagination:true
			//select_row_cb: select_spec,
			//row_id: defaults['sprint_id']
			});
		
		var $SelectedRequirements = $('#selected-requirements').ZTable({
			columns:{'name':'Name', 'importance':'Importance', 'source':'From'},
			with_title:true,
			pagination:true
			});
		
		var $SprintRequirements = $('#sprint-requirements').ZTable({
			columns:{'name':'Name', 'importance':'Importance', 'source':'From'},
			with_title:true,
			pagination:true
			});		
		
		function setTreeActions(node){
			var dropdown = $('#tree-actions .dropdown-menu');
			var node_type = node['type'];
			
			dropdown.find('li').hide();
			$('.new-project-menu').show();
			if(node_type=='h'){
				
			}else if(node_type=='p'){
				$('.edit-project-menu').show();
				$('.del-project-menu').show();
				$('.new-sprint-menu').show();
			}else if(node_type=='b'){
				$('.new-requirement-menu').show();
			}else if(node_type=='s'){
				$('.edit-sprint-menu').show();
				$('.del-sprint-menu').show();
				//$('.new-requirement-menu').show();
			}
		}
		
		function getNodeType(node){
	        return node['type'];
		}
		
		function getNodeId(node){
	        if( node['id'].indexOf("p-") != -1 ){
	        	var _id = node['id']
	        	var ids = _id.split("-");
	        	return ids[1];
	        }else if(node['id'].indexOf("s-") != -1 ){
	        	var _id = node['id']
	        	var ids = _id.split("-");
	        	return ids[1];
	        }
	        else{
	        	return node['id'];
	        }
		}
		
		function getSelectedNodeId(){
		    var node = $ProjectTree.getSelectedNode();
			return getNodeId(node);
		}

		$('[name="start-date"]').datepicker({
		    startDate: '-3d'
		})
		
		$('[name="end-date"]').datepicker({
		    startDate: '-3d'
		})
		
		
		$("#tree-actions .edit-project-menu").click(function(){
			$('#project-dialog .modal-title').text('Edit Project');
			$ProjectForm.setMode('edit');
			
			var project_id = getSelectedNodeId();
			
			getProject(project_id, function(project){
				$ProjectForm.load(project);
			});
		});
		
		function openNewProject(){
			$('#project-dialog').modal('show');
			$('#project-dialog .modal-title').text('New Project');
			$ProjectForm.cleanup();
			$ProjectForm.setMode('new');
		}
		
		$(".new-project-menu").click(function(){
			$('#project-dialog .modal-title').text('New Project');
			$ProjectForm.cleanup();
			$ProjectForm.setMode('new');
		});
		
		$(".edit-sprint-menu").click(function(){
			$('#sprint-dialog .modal-title').text('Edit Sprint');
			$SprintForm.setMode('edit');
			
			var sprint_id = getSelectedNodeId();
			getSprint(sprint_id, function(project){
				$SprintForm.load(sprint);
			});

		});
		
		$(".new-sprint-menu").click(function(){
			$('#sprint-dialog .modal-title').text('New Sprint');
			$SprintForm.cleanup();
			$SprintForm.setMode('new');
			
			var project_id = getSelectedNodeId();
			$('#sprint-dialog [name="project_id"]').val(project_id);
		});
		
		$(".new-requirement-menu").click(function(){
			$('#requirement-dialog .modal-title').text('New Sprint');
			$RequirementForm.setMode('new');
			
			var node = $ProjectTree.getSelectedNode();
			var node_type = getNodeType(node);
			if (node_type == 's'){
				var sprint_id = getNodeId(node);
				$('#requirement-dialog [name="sprint_id"]').val(sprint_id);
			}else if(node_type == 'b'){
				var project_id = getNodeId(node);
				$('#requirement-dialog [name="project_id"]').val(project_id);
			}
		});
		
		$('#requirement-dialog').find('.z-btn-submit').click(function(){
			$RequirementForm.submit( '/submit_requirement', function(data){
				$('#requirement-dialog').modal('hide');
				updateProjectTree();
			});
		});
		
		$('#sprint-dialog').find('.z-btn-submit').click(function(){
			$SprintForm.submit( '/submit_sprint', function(data){
				$('#sprint-dialog').modal('hide');
				updateProjectTree();
			});
		});
		
		$('#project-dialog').find('.z-btn-submit').click(function(){
			$ProjectForm.submit( '/submit_project', function(data){
				$('#project-dialog').modal('hide');
				updateProjectTree();
			});
		});		

		function ShowHomeView(){
			$('#home-view').show();
			//showTimeline();
		}
		
		function ShowProjectView(project_id){
			$('#project-view').show();
			getSprints(project_id, function(sprints){})
			showSprintTimeline(project_id);
		}
		
		function ShowBacklogView(project_id){
			$('#backlog-view').show();
			
			updateRequirementsList($RequirementList, project_id, 1);
			updateSprintSelection(project_id);	
			updateRequirementsList($SelectedRequirements, project_id, 0);
		}
		
		function ShowSprintView(sprint_id){
			$('#sprint-view').show();
			updateRequirementsList($SprintRequirements, sprint_id, 0);
		}
		
		function hideViews(){
			$('#home-view').hide();
			$('#project-view').hide();
			$('#backlog-view').hide();
			$('#sprint-view').hide();
			
			if($SprintTimeline!=null){
				$SprintTimeline.hide();	
			}
		}
		
	    function updateNode(node){
			
			if(node.type == 'h'){ //root
				hideViews();
				ShowHomeView();
				$('#requirement-toolbar button').prop('disabled', true);
			}else if(node.type == 'p'){
				hideViews();
				var project_id = getNodeId(node);
				ShowProjectView(project_id);
				
				$('#requirement-toolbar button').prop('disabled', true);
			}else if(node.type == 'b'){
				hideViews();
				var project_id = getNodeId(node);
				ShowBacklogView(project_id);
				$('#requirement-toolbar button').prop('disabled', false);
			}else if(node.type == 's'){
				hideViews();
				var sprint_id = getNodeId(node);
				ShowSprintView(sprint_id);
			}
			
			setTreeActions(node);
	    }
	    
	    function isTreeEmpty(datas){
	    	// Check to see if there is no project in the tree
	    	return datas[0].children.length == 0;
	    }
	    
		function updateProjectTree(){
			
			$.post('/get_project_tree').done(
					function(data){
						var _datas = $.parseJSON(data.trees);
						if(isTreeEmpty(_datas)){
							$ProjectTree.loadData(_datas);
							openNewProject();
						}else{
							$ProjectTree.loadData(_datas);
						}
						
					});
		}
		
		function getSelectedSprintId(){
			return $('[name="sprint-selection"]').find(":selected").data('id');
		}
		
		$('.z-checkin-btn').click(function(){
			var ids = $SelectedRequirements.getCheckedIds();
			$.post('/checkin_requirements' ,{'json_ids':JSON.stringify(ids)}).done(
					function(data){
						var node = $ProjectTree.getSelectedNode();
						var project_id = getNodeId(node);
						updateRequirementsList($RequirementList, project_id, 1);
						
						var sprint_id = getSelectedSprintId();
						updateRequirementsList($SelectedRequirements, sprint_id, 0);
					});			
		});
		
		$('.z-checkout-btn').click(function(){
			var ids = $RequirementList.getCheckedIds();
			var sprint_id = getSelectedSprintId();
			
			$.post('/checkout_requirements' ,{'sprint_id':sprint_id,'json_ids':JSON.stringify(ids)}).done(
					function(data){
						var node = $ProjectTree.getSelectedNode();
						var project_id = getNodeId(node);
						updateRequirementsList($RequirementList, project_id, 1);
						
						var sprint_id = getSelectedSprintId();
						updateRequirementsList($SelectedRequirements, sprint_id, 0);
					});	
		});
		
		
		function updateRequirementsList(table, sid, in_backlog){
			// Arguments:
			// 	table -- jquery object type
			//	sid -- string type, if in_backlog is 1, sid means project_id, if in_backlog is 0, sid means sprint_id
			//	in_backlog -- int type, 1 means in backlog
			var params = null;

			if(in_backlog){
				params = {'in_backlog':1, 'project_id': sid};
			}else{
				params = {'in_backlog':0, 'sprint_id': sid};
			}
			
			$.post('/get_requirements', params).done(
					function(data){
						var requirements = $.parseJSON(data.requirements);
						
						var importances = ["Must have","Nice to have","Consider later"];
						var sources = ["Client","Market","Director","Internal","Others"];
						$.each(requirements, function(index, requirement){
							var ri = parseInt(requirement["importance"]);
							var si = parseInt(requirement["source"]);
							
							requirements[index]["importance"] = importances[ri];
							requirements[index]["source"] = sources[si];
						});
						
						table.loadAll(requirements,{'name':'Name', 'importance':'Importance', 'source':'From'});
						table.showPage(0);
						table.updatePagination();

					});
		}
		
		function updateSprintSelection(project_id){
			$.post('/get_sprints' ,{'project_id': project_id}).done(
					function(data){
						var selection = $('[name="sprint-selection"]').empty();
						var sprints = $.parseJSON(data.sprints);
						$.each(sprints, function(index, sprint){
							var option = $('<option></option>');
							option.text(sprint['name']);
							option.data('id', sprint['_id']);
							selection.append(option);	
						});
						
					});
		}
		
		$("#requirement-toolbar .z-btn-new").click(function(){
			$('#requirement-dialog .modal-title').text('New Requirement');
			$RequirementForm.setMode('new');
			
			var node = $ProjectTree.getSelectedNode();
			var node_type = getNodeType(node);
			if (node_type == 's'){
				var sprint_id = getNodeId(node);
				$('#requirement-dialog [name="sprint_id"]').val(sprint_id);
			}else if(node_type == 'b'){
				var project_id = getNodeId(node);
				$('#requirement-dialog [name="project_id"]').val(project_id);
			}
		});
		
		$("#requirement-toolbar .z-btn-edit").click(function(){
			$('#requirement-dialog .modal-title').text('Edit Requirement');
			$RequirementForm.setMode('edit');
			
			var $Row = $RequirementList.getSelectedRow();
			var sid = $Row.data('id');
			
			if(sid != ''){
				$.post('/get_requirement', {sid: sid} ).done(
						function(data){
							var requirement = $.parseJSON(data.requirement);
							$RequirementForm.load(requirement);
						});
			}
		});
		/*
		$("#requirement-toolbar .z-btn-remove").click(function(){
			var $Row = $RequirementList.getSelectedRow();
			var sid = $Row.data('id');
			if(sid != ''){
				$.post('/delete_requirements', {sid: sid} ).done(
						function(data){
							var requirements = $.parseJSON(data.requirements);
							table.loadAll(requirements,{'name':'Name', 'importance':'Importance', 'source':'From'});
							table.showPage(0);
							table.updatePagination();
						});
			}
		});
		*/
		$('[name="sprint-selection"]').change(function(){
			var sprint_id = getSelectedSprintId();
			updateRequirementsList($SelectedRequirements, sprint_id, 0);
		});
		
		
		function getProject(project_id, callback){
			if(project_id != ''){
				$.post('/get_project', { sid: project_id} ).done(
						function(data){
							var project = $.parseJSON(data.project);
							$ProjectForm.load(project);
							
							callback(project);
							
						});
			}
		}
		
		function getSprint(sprint_id, callback){
			if(sprint_id != ''){
				$.post('/get_sprint', { sid: sprint_id} ).done(
						function(data){
							var sprint = $.parseJSON(data.sprint);
							callback(sprint);
						});
			}
		}
		
		function getSprints(project_id, callback){
			$.post('/get_sprints' ,{'project_id': project_id}).done(
					function(data){
						var sprints = $.parseJSON(data.sprints);
						callback(sprints);
					});
		}
		

		function getSprintSection(project_id){
			getProject(project_id, function(project){
				return {dates: [new Date(project['start-date']), new Date(project['end-date'])], 
							  title: project['name'], 
							  section: 0, 
							  attrs: {fill: "##cce5ff"}};
			});
		}
		
		function getSprintEvents(project_id){

		}


        
		
		function showSprintTimeline(project_id){
			
			
			getProject(project_id, function(project){
				var section = {dates: [new Date(project['start-date']), new Date(project['end-date'])], 
							  title: project['name'], 
							  section: 0, 
							  attrs: {fill: "##cce5ff"}};
				
				var projectStart = section.dates[0];
				
				var startDate = new Date(projectStart.getFullYear(), projectStart.getMonth()-1, projectStart.getDate());
				
				$('#project-name').text('Project: ' + project['name']);
				$('#project-description').text('Description: '+project['description']);
				$('#project-dates').text('From: ' + project['start-date'] + ' to: ' + project['end-date']);
				getSprints(project_id, function(sprints){
					var events = [];
					
					$.each(sprints, function(index, sprint){
						events.push({dates: [new Date(sprint['start-date']), new Date(sprint['end-date'])], 
							  title: sprint['name'], 
							  section: 0});	
					});
				
					
					if ($SprintTimeline == null){
			        	$SprintTimeline = new Chronoline(document.getElementById("sprint-timeline"), 
		         		   	events,
		              		{visibleSpan: DAY_IN_MILLISECONDS * 91,
								animated: true,
								tooltips: false,
								defaultStartDate: startDate,
								sections: [section],
								sectionLabelAttrs: {'fill': '#997e3d', 'font-weight': 'bold'},
								labelInterval: isFifthDay,
								hashInterval: isFifthDay,
								scrollLeft: prevMonth,
								scrollRight: nextMonth,
								markToday: 'labelBox',
								draggable: false
		            			});
			        	//$("#target2").hide();
			        	$SprintTimeline.show();
					}else{
						$SprintTimeline.show();
					}
					
				});
				
				
			});
		}
		
		
		// Initialize
		updateProjectTree();
		

		

	});
</script>
{% endblock %}

{% block content %}

		<div class="left-area col-sm-2">
			<div class="col-sm-7"></div>
			  <div id="tree-actions" class="btn-group">
			    <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
			      Actions
			      <span class="caret"></span>
			    </button>
			    <ul class="dropdown-menu">
					<li class="new-project-menu" data-toggle="modal" data-target="#project-dialog"><a href="#">New Project</a></li>
					<li class="edit-project-menu" data-toggle="modal" data-target="#project-dialog"><a href="#">Edit Project</a></li>
					<li class="del-project-menu" data-toggle="modal" data-target="#project-dialog"><a href="#">Delete Project</a></li>
					<li class="new-sprint-menu" data-toggle="modal" data-target="#sprint-dialog"><a href="#">New Sprint</a></li>
					<li class="edit-sprint-menu" data-toggle="modal" data-target="#sprint-dialog"><a href="#">Edit Sprint</a></li>
					<li class="del-sprint-menu" data-toggle="modal" data-target="#sprint-dialog"><a href="#">Delete Sprint</a></li>
					<li class="new-requirement-menu" data-toggle="modal" data-target="#requirement-dialog"><a href="#">New Requirement</a></li>
			    </ul>
			  </div>
		  
			<div id="project-tree" class="col-sm-12"></div>
			
		</div>

		<div class="main-area col-sm-9">

		<div id="home-view">
			<div id="target2" class="timeline-tgt"></div>
		</div>
		
		<div id="project-view" class='col-sm-12'>
			<div class="row col-sm-12">
				<div id='project-name' class='col-sm-12'></div>
				<div id='project-description' class='col-sm-12'></div>
				<div id='project-dates' class='col-sm-12'></div>
			</div>
			<div id="sprint-timeline" class="timeline-tgt"></div>
		</div>

		<div id="backlog-view">

			<div id="requirement-toolbar" class="row btn-group z-toolbar col-sm-12">
				<button class="btn btn-default z-btn-new" data-toggle="modal" data-target="#requirement-dialog">
					<span class="glyphicon glyphicon-plus"></span>
				</button>
				<button class="btn btn-default z-btn-edit" data-toggle="modal" data-target="#requirement-dialog">
					<span class="glyphicon glyphicon-edit"></span>
				</button>
				<button class="btn btn-default z-btn-remove" data-toggle="modal" data-target="#requirement-dialog">
					<span class="glyphicon glyphicon-remove"></span>
				</button>
			</div>
			
			<div id="requirement-list" class="col-sm-8"></div>
			
			<div id="checkout-toolbar" class="row btn-group z-toolbar col-sm-12">
				<button class="btn btn-default z-checkout-btn">
					<span class="glyphicon glyphicon-chevron-down"></span>
					Check out
				</button>
				<div class="col-sm-2">
					<select class="form-control" name="sprint-selection">
						<option value="0">{{"New Sprint"}}</option>
					</select>
				</div>
				<button class="btn btn-default z-checkin-btn">
					<span class="glyphicon glyphicon-chevron-up"></span>
					Check in
				</button>
				
				</div>
			
			<div id="selected-requirements" class="col-sm-8"></div>
		</div>
		
		<div id="sprint-view">
			<div id="sprint-requirements" class="col-sm-8"></div>
		</div>
				
			<!-- Requirement Modal Dialog-->
			<div class="modal fade" id="requirement-dialog" tabindex="-1" role="dialog" aria-hidden="true">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			        <h4 class="modal-title">New Requirement</h4>
			      </div>
			      
				<div class="modal-body">
					<form id="requirement-form" onsubmit="return false;">
						<div class="row form-group">
							<div class="z-label col-md-2">{{'Name'}}</div>
							<div class="col-md-7">
								<input class="form-control" type="text" name="name" placeholder="{{ 'Requirement name' }}" />
							</div>
							<div class="col-md-3 z-hint"></div>
						</div>
				
						<div class="row form-group">
							<div class="z-label col-md-2">{{'Description'}}</div>
							<div class="col-md-7">
								<textarea class="form-control" rows="5" name="description" placeholder="{{ 'Enter description' }}"></textarea>
							</div>
							<div class="col-md-3 z-hint"></div>
						</div>
						<div class="row form-group">
							<div class="z-label col-md-2">{{ 'Importance' }}</div>
							<div class="col-md-7">
								<select class="form-control col-md-6" name="importance">
									<option value="0">{{"Must have"}}</option>
									<option value="1">{{"Nice to have"}}</option>
									<option value="2">{{"Consider later"}}</option>
								</select>
							</div>
						</div>
		
						<div class="row form-group">
							<div class="z-label col-md-2">{{ 'From' }}</div>
							<div class="col-md-7">
								<select class="form-control col-md-6" name="source">
									<option value="0">{{"Client"}}</option>
									<option value="1">{{"Market"}}</option>
									<option value="2">{{"Director"}}</option>
									<option value="3">{{"Internal"}}</option>
									<option value="4">{{"Others"}}</option>
								</select>
							</div>
						</div>
						<!-- Hidden fields are for edit -->
						<input class="hide" type="text" name="_id" />
						<input class="hide" type="text" name="in_backlog" />
						<input class="hide" type="text" name="created" />
						<input class="hide" type="text" name="project_id" />
						<input class="hide" type="text" name="sprint_id" />  
					</form>
			      </div><!-- end of modal body -->
			      
			      <div class="modal-footer">
						<button class="btn btn-default" data-dismiss="modal">Close</button>
			        	<button class="btn btn-primary z-btn-submit">Save changes</button>
			      </div>
				
			      
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div><!-- /.modal -->

			<!-- Modal Dialog -->
			<div class="modal fade" id="sprint-dialog" tabindex="-1" role="dialog" aria-hidden="true">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			        <h4 class="modal-title">New Sprint</h4>
			      </div>
			      
			      <form id="sprint-form" onsubmit="return false;">
			      	<div class="modal-body">
						<div class="row form-group">
							<div class="z-label col-md-2">{{ 'Name' }}</div>
							<div class="col-md-7">
								<input class="form-control" name="name" type="text" placeholder="{{ 'Enter sprint name' }}" />
							</div>
							<div class="col-md-3 z-hint"></div>
						</div>
				
						<div class="row form-group">
							<div class="z-label col-md-2">{{ 'Description' }}</div>
							<div class="col-md-7">
								<textarea class="form-control" rows="5" name="description" placeholder="{{ 'Enter description' }}"></textarea>
							</div>
							<div class="col-md-3 z-hint"></div>
						</div>
						
						<div class="row form-group" >
							<div class="z-label col-md-2">{{ 'Plan' }}</div>
							<div class="col-md-3">
								<input class="form-control" name="start-date" data-date-format="mm/dd/yyyy" placeholder="{{ 'Start date' }}">
							</div>
							<div class="col-md-4 input-group">
								<span class="input-group-addon">to</span>
								<input class="form-control" name="end-date" data-date-format="mm/dd/yyyy" placeholder="{{ 'End date' }}">
							</div>
							<div class="col-md-3 z-hint"></div>
						</div>
						
						<input class="hide" type="text" name="project_id" />
						<input class="hide" type="text" name="_id" />
						<input class="hide" type="text" name="created" />
			
			      </div>
			      <div class="modal-footer">
			        <button class="btn btn-default cancel" data-dismiss="modal">Close</button>
			        <button class="btn btn-primary z-btn-submit">Save changes</button>
			      </div>
			      
			      </form>
			      
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div><!-- /.modal -->
			



			<!-- Project Modal Dialog -->
			<div class="modal fade" id="project-dialog" tabindex="-1" role="dialog" aria-hidden="true">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			        <h4 class="modal-title">New Project</h4>
			      </div>
			      
			      
			      <form id="project-form" onsubmit="return false;">
			      <div class="modal-body">
			      
						<div class="row form-group">
							<div class="z-label col-md-2">{{ 'Name' }}</div>
							<div class="col-md-7">
								<input class="form-control" name="name" type="text" placeholder="{{ 'Enter project name' }}" />
							</div>
							<div class="col-md-3 z-hint"></div>
						</div>
				
						<div class="row form-group">
							<div class="z-label col-md-2">{{ 'Description' }}</div>
							<div class="col-md-7">
								<textarea class="form-control" rows="5" name="description" placeholder="{{ 'Enter description' }}"></textarea>
							</div>
							<div class="col-md-3 z-hint"></div>
						</div>
				
						<div class="row form-group" >
							<div class="z-label col-md-2">{{ 'Plan' }}</div>
							<div class="col-md-3">
								<input class="form-control" name="start-date" data-date-format="mm/dd/yyyy" placeholder="{{ 'Start date' }}">
							</div>
							<div class="col-md-4 input-group">
								<span class="input-group-addon">to</span>
								<input class="form-control" name="end-date" data-date-format="mm/dd/yyyy" placeholder="{{ 'End date' }}">
							</div>
							<div class="col-md-3 z-hint"></div>
						</div>
						
						<input class="hide" type="text" name="_id" />
						<input class="hide" type="text" name="created" />
			
			      </div>
			      
			      <div class="modal-footer">
			        <button class="btn btn-default canel" data-dismiss="modal">Close</button>
			        <button class="btn btn-primary z-btn-submit">Save changes</button>
			      </div>
			      
			      </form>
			      
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div><!-- /.modal -->


					
		</div><!-- / .main-area  -->
		
		
		
{% endblock %}



